<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    #box {
      border: 1px solid black;
      width: 70%;
      text-align: center;
      margin: 20px auto;
    }
  </style>
</head>

<body>
  <div id="box">
    <span id="year">2020年</span>
    <span id="month">11月</span>
    <span id="day">2日</span>
    <span id="hours">14时</span>
    <span id="minutes">20分</span>
    <span id="second">50秒</span>
    <span id="week"></span>
  </div>
  <script>
    // 获取所有的显示元素
    var yearEle = document.getElementById("year")
    var monthEle = document.getElementById("month")
    var dayEle = document.getElementById("day")
    var hoursEle = document.getElementById("hours")
    var minutesEle = document.getElementById("minutes")
    var secondEle = document.getElementById("second")
    var weekEle = document.getElementById("week")


    function loadTime() {
      // 通过获取系统时间  获取年月日时分秒
      var date = new Date();//获取当前日期
      var year = date.getFullYear(); //年
      var month = date.getMonth() + 1;//月
      var day = date.getDate(); //日
      var hours = date.getHours();//时
      var minutes = date.getMinutes();//分
      var second = date.getSeconds();//秒
      var week = ""
      switch (date.getDay()) { //date.getDay() 0--6
        case 0:
          week = "星期日"
          break;
        case 1:
          week = "星期一"
          break;
        case 2:
          week = "星期二"
          break;
        case 3:
          week = "星期三"
          break;
        case 4:
          week = "星期四"
          break;
        case 5:
          week = "星期五"
          break;
        case 6:
          week = "星期六"
          break;
        default:
          break;
      }

      // 获取到的年月日时分秒 赋值给DOM元素
      yearEle.innerHTML = year + "年";
      monthEle.innerHTML = month + "月";
      dayEle.innerHTML = day + "日";
      hoursEle.innerHTML = hours + "时"
      minutesEle.innerHTML = minutes + "分";
      secondEle.innerHTML = second + "秒"
      weekEle.innerHTML = week;

    }
    // 
    // setInterval(function () {
    // loadTime()//函数可以传参
    // }, 1000)

    // 不需要传参 调用方式
    setInterval(loadTime, 1000)
  </script>

</body>

</html>